import React, {FC, useState, useRef, useEffect} from "react";
import "./taskList.scss";
import {inject, observer} from "mobx-react";

/*
* props 参数说明
* title：标题
* taskType：任务类型
* add：是否显示添加按钮
* backgroundColor：背景颜色
*/
const TaskList: FC<any> = ({MobxData, title, taskType = "prepare", add = true, backgroundColor}) => {
    // mobx数据
    const {study, addStudy, upStudy, delStudy} = MobxData;
    const {boundary, addBoundary} = MobxData;

    const [addstate, setAddState] = useState(false);

    const mainDOM = useRef<HTMLDivElement>(null);
    const boxDOM = useRef<HTMLDivElement>(null);

    useEffect(() => {
        // 记录组件的位置信息
        addBoundary({
            DOM: boxDOM.current,
            taskType,
            top: mainDOM.current!.offsetTop,
            left: mainDOM.current!.offsetLeft,
            right: mainDOM.current!.offsetWidth + mainDOM.current!.offsetLeft,
            bottom: mainDOM.current!.offsetHeight + mainDOM.current!.offsetTop
        });
    }, []);

    // 输入框 失焦
    const inputBlur = (e: any) => {
        // 添加
        e.target.value && addStudy(e.target.value);
        // 关闭输入框
        setAddState(false);
    }
    // 添加学习
    const addbtn = () => {
        // 显示输入框
        setAddState(true);
    };
    // 鼠标按下
    const itemDown = (event: any, id: Number) => {
        const box = event.target
        // 鼠标相对元素的位置
        let diffX = event.clientX - box.offsetLeft;
        let diffY = event.clientY - box.offsetTop;
        // 鼠标移动
        document.onmousemove = (e) => {
            // 元素最新位置
            let moveX = e.clientX - diffX;
            let moveY = e.clientY - diffY;
            // 设置元素位置
            box.style.left = moveX + 'px';
            box.style.top = moveY + 'px';
            // 左边的边界
            const left = e.clientX - e.offsetX;
            // 上边的边界
            const top = e.clientY - e.offsetY;
            // 右边的边界
            const right = e.clientX - e.offsetX + box.offsetWidth;
            // 下边的边界
            const bottom = e.clientY - e.offsetY + box.offsetHeight;
            // 碰撞检测
            boundary.filter((item: any) => item.taskType != taskType).forEach((item: any) => {
                if (item.left < right && item.right > left && item.top < bottom && item.bottom > top) {
                    item.DOM.style.border = "1px solid blue";
                } else {
                    item.DOM.style.border = 0;
                }
            });
        }
        // 鼠标松开
        document.onmouseup = (e) => {
            // 左边的边界
            const left = e.clientX - e.offsetX;
            // 上边的边界
            const top = e.clientY - e.offsetY;
            // 右边的边界
            const right = e.clientX - e.offsetX + box.offsetWidth;
            // 下边的边界
            const bottom = e.clientY - e.offsetY + box.offsetHeight;
            // 碰撞检测
            boundary.filter((item: any) => item.taskType != taskType).forEach((item: any) => {
                if (item.left < right && item.right > left && item.top < bottom && item.bottom > top) {
                    // 变更状态
                    upStudy(id, item.taskType);
                } else {
                    // 没有碰撞  恢复原有位置
                    box.style.left = 0;
                    box.style.top = 0;
                }
                item.DOM.style.border = 0;
            });
            // 清空事件
            document.onmousemove = null;
            document.onmouseup = null;
        }
    }
    // 鼠标移入
    const itemEnter = (event: any) => {
        if (event.target.firstElementChild) {
            event.target.firstElementChild!.style.display = "inline-block";
        } else {
            event.target!.style.display = "inline-block";
        }
    }
    // 鼠标移除
    const itemOut = (event: any) => {
        if (event.target.firstElementChild) {
            event.target.firstElementChild!.style.display = "none";
        } else {
            event.target!.style.display = "none";
        }
    }

    return (
        <div ref={mainDOM} className="main">
            <h2 style={backgroundColor && {backgroundColor: backgroundColor}}>{title}</h2>
            <div ref={boxDOM} className="box" style={backgroundColor && {backgroundColor: backgroundColor}}>
                {/* 任务列表 */}
                <div className="taskList">
                    {
                        study.map((item: any) => {
                            if (item.status === taskType) {
                                return (
                                    <div key={item.id}>
                                        <div className="item" onMouseEnter={itemEnter} onMouseLeave={itemOut}
                                             onMouseDown={(e) => {
                                                 itemDown(e, item.id)
                                             }}>
                                            {item.name}
                                            <span onClick={() => {
                                                delStudy(item.id);
                                                return false;
                                            }}>x</span>
                                        </div>
                                    </div>
                                )
                            }
                        })
                    }
                    <div>
                        {
                            addstate && <input type="text" onBlur={inputBlur} placeholder="请输入学习内容"/>
                        }
                    </div>
                </div>
                {/* 添加 */}
                {
                    add && <div className="add" onClick={addbtn}>+</div>
                }
            </div>
        </div>
    );
};
export default inject('MobxData')(observer(TaskList));